<template>
  <div class="page">
    <van-nav-bar
        title="学生端"
        left-text="菜单"
        left-arrow
        @click-left="handleMenu"
    />
    <div class="content">
      <img src="@/assets/轮播图1.jpg" alt="Logo" class="logo" />

      <div class="button-section">
        <van-row>
          <van-col span="6">
            <div class="button-container" @click="navigateTo('repair-request')">
              <img src="@/assets/维修报修.png" alt="报修申请" class="button-icon" />
              <span class="button-text">报修申请</span>
            </div>
          </van-col>
          <van-col span="6">
            <div class="button-container" @click="navigateTo('repair-progress')">
              <img src="@/assets/维修进度.png" alt="维修进度" class="button-icon" />
              <span class="button-text">维修进度</span>
            </div>
          </van-col>
          <van-col span="6">
            <div class="button-container" @click="navigateTo('service-evaluation')">
              <img src="@/assets/服务评价.png" alt="服务评价" class="button-icon" />
              <span class="button-text">服务评价</span>
            </div>
          </van-col>
          <van-col span="6">
            <div class="button-container" @click="navigateTo('fault-report')">
              <img src="@/assets/意见反馈.png" alt="故障上报" class="button-icon" />
              <span class="button-text">报修记录</span>
            </div>
          </van-col>
        </van-row>
      </div>

      <div class="notice-section">
        <h2 class="notice-title">通知公告</h2>
        <ul class="notice-list">
          <li
              v-for="(notice, index) in displayedNotices"
              :key="index"
              class="notice-item"
              @click="viewAnnouncement(notice)"
          >
            <span class="notice-item-title">{{ notice.title }}</span>
            <span class="notice-item-date">{{ notice.date }}</span>
          </li>
        </ul>
      </div>

      <div class="record-section">
        <h2 class="record-title">维修记录</h2>
        <ul class="record-list">
          <li
              v-for="(record, index) in displayedRecords"
              :key="index"
              class="record-item"
          >
            <span class="record-item-title">{{ record.title }}</span>
            <span class="record-item-date">{{ record.date }}</span>
          </li>
        </ul>
      </div>
    </div>
    <van-tabbar v-model="activeTab" fixed bottom>
      <van-tabbar-item icon="home-o" @click="navigateTo('home')">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" @click="navigateTo('messages')">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="navigateTo('personal-center')">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()

const handleBack = () => {
  router.back()
}

const handleMenu = () => {
  // 实现菜单弹出功能
}

const navigateTo = (page) => {
  router.push(`/${page}`)
}

const activeTab = ref(0)

const notices = ref([
  {title: '关于2024年暑假期间后勤服务保障工作安排的通知', date: '2024年07月11日'},
  {title: '关于2024年春季学期开车发车时间的通知', date: '2024年02月29日'},
  {title: '关于2024年寒假期间食堂开餐的通知', date: '2024年01月16日'},
  {title: '关于调整2024年寒假期间校车运行时间的通知', date: '2024年01月16日'},
  {title: '关于调整第52届运动会期间屏风、雁山两校区 通勤车...', date: '2023年11月01日'},
  {title: '关于2023年10月17日校车停运的通知', date: '2023年10月14日'},
  {title: '关于2023年秋季学期开车发车时间的通知', date: '2023年08月31日'},
  {title: '关于调整2023年暑假校车运行时间的通知', date: '2023年07月07日'}
])

const records = ref([
  {title: '教室灯管更换', date: '2024年07月11日'},
  {title: '宿舍水龙头修理', date: '2024年06月25日'},
  {title: '图书馆空调维护', date: '2024年05月15日'},
  {title: '操场跑道修复', date: '2024年04月20日'},
  {title: '教学楼电梯检修', date: '2024年03月30日'},
  {title: '实验室设备维修', date: '2024年03月10日'},
  {title: '宿舍楼屋顶修缮', date: '2024年02月05日'},
  {title: '体育馆灯光升级', date: '2024年01月22日'}
])

const displayedNotices = computed(() => notices.value.slice(0, 4))
const displayedRecords = computed(() => records.value.slice(0, 3)) // 只显示3条记录

const viewAnnouncement = (notice) => {
  router.push({name: 'announcement', query: {title: notice.title, date: notice.date}});
}
</script>

<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.logo {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: cover;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.button-section {
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.button-icon {
  width: 50px;
  height: 50px;
}

.button-text {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}

.notice-section, .record-section {
  margin-top: 20px;
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notice-title, .record-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  text-align: center;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

.notice-list, .record-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.notice-item, .record-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s;
}

.notice-item:hover, .record-item:hover {
  background-color: #f0f0f0;
}

.notice-item-title, .record-item-title {
  font-size: 16px;
  color: #333;
  flex: 1;
  padding-right: 10px;
}

.notice-item-date, .record-item-date {
  font-size: 14px;
  color: #888;
  white-space: nowrap;
}
</style>
